<template>
  <div class="ImageLoader-container" >
      <img  v-if="!removePlaceholder" class="placeholder"  :src="placeholder" alt="">
      <img @load="handloder" class="origin " :src="src" :style="{ opacity : handlopinicty, transition:`${duration}ms`}" >

  </div>
</template>

<script>

export default {
    data(){
 return {
     originOpinicty: false,
     removePlaceholder:false,
 }
    },
props:{
    src:{
        type:String,
        required:true,
    },
    placeholder:{
        type:String,
        required:true,
    },
    duration:{
        type:Number,
        default:500,
    },

},
computed:{
    handlopinicty(){
     return  this.originOpinicty?1:0;
    }
},

methods:{
    handloder(){
  this.originOpinicty=true;
    setTimeout(()=>{
    this.removePlaceholder=true
    this.$emit('load');
    },this.duration)

    },

}

}

</script>
<style lang="less" scoped>
@import '~@/style/general';
.ImageLoader-container{
    width:100%;
    height:100%;
    position: relative;
    overflow: hidden;

    img{
      .self-filled();  
      object-fit: cover;
     
    }
   .placeholder{
    filter: blur(1vw);
   }
}

</style>